<template>
    <div class="business-container">
        <div class="content-wrapper">
            <h2>业务模型管理</h2>

            <!-- 查询条件 -->
            <div class="query-section">
                <span>集合key：</span>
                <el-input v-model="businessModelQueryParam.modelKey" class="input-field" placeholder="请输入" />
                <span>集合名称：</span>
                <el-input v-model="businessModelQueryParam.modelName" class="input-field" placeholder="请输入" />
                <span>启用状态：</span>
                <el-radio-group v-model="businessModelQueryParam.isEnable">
                    <el-radio :value="0">启用</el-radio>
                    <el-radio :value="1">未启用</el-radio>
                </el-radio-group>
                <div class="button-section">
                    <el-button type="primary" :icon="Search" @click="searchBusinessModelByQueryParam(businessModelQueryParam)">搜索</el-button>
                    <el-button type="success" :icon="Plus" @click="insertBusinessModelWindowEnable = true">新增</el-button>
                </div>
            </div>

            <!-- 业务模型列表 -->
            <div class="table-section">
                <el-table 
                    :data="paginatedBusinessModels" 
                    class="business-model-table"
                    :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
                    border
                >
                    <el-table-column label="id" width="80" align="center">
                    <template #default="scope">
                        <el-popover effect="light" trigger="hover" placement="top" width="auto">
                                <template #default>
                                    <div>{{ scope.row.id }}</div>
                                </template>
                                <template #reference>
                                    <el-tag>{{ scope.row.id.toString().substring(0, 4) }}</el-tag>
                                </template>
                            </el-popover>
                    </template>
                    </el-table-column>
                    <el-table-column label="业务模型key" width="240" align="center">
                        <template #default="scope">
                            <span>{{ scope.row.modelKey }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="业务模型名称" width="240" align="center">
                        <template #default="scope">
                            <span>{{ scope.row.modelName }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="描述" width="300" align="center">
                        <template #default="scope">
                            <el-popover effect="light" trigger="hover" placement="top" width="auto">
                            <template #default>
                                <div>{{ scope.row.description }}</div>
                            </template>
                            <template #reference>
                                <el-tag>{{ scope.row.description.substring(0, 4) }}</el-tag>
                            </template>
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" width="80" align="center">
                        <template #default="scope">
                            <span>{{ scope.row.isEnable == 0 ? "启用" : "未启用" }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" align="center">
                        <template #default="scope">
                            <el-button type="info" size="small" :icon="List" @click="getBusinessModelItemInfo(scope.$index, scope.row)">详情</el-button>
                            <el-button type="warning" size="small" :icon="Edit" @click="updateBusinessModel(scope.$index, scope.row)">修改</el-button>
                            <el-button type="danger" size="small" :icon="Delete" @click="deleteBusinessModel(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 添加分页组件 -->
                <div class="pagination-container">
                    <el-pagination
                        v-model:current-page="businessModelCurrentPage"
                        v-model:page-size="businessModelPageSize"
                        :page-sizes="[10, 20, 50, 100]"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="businessModelInfoList.length"
                        @size-change="businessModelHandleSizeChange"
                        @current-change="businessModelHandleCurrentChange"
                    />
                </div>
            </div>

            <!-- 新增业务模型对话框 -->
            <el-dialog v-model="insertBusinessModelWindowEnable" title="新增业务模型">
                <!-- 对话框内容 -->
                <el-form :model="businessModelInsert" label-width="120px">
                    <el-form-item label="业务模型key">
                        <el-input v-model="businessModelInsert.modelKey"></el-input>
                    </el-form-item>
                    <el-form-item label="业务模型名称">
                        <el-input v-model="businessModelInsert.modelName"></el-input>
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input v-model="businessModelInsert.description" type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item label="是否启用">
                        <el-radio-group v-model="businessModelInsert.isEnable">
                            <el-radio :value="0">启用</el-radio>
                            <el-radio :value="1">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="insertBusinessModelWindowEnable = false">取消</el-button>
                        <el-button type="primary" @click="insertBusinessModelSubmit()">确定</el-button>
                    </span>
                </template>
            </el-dialog>
            <!-- 修改业务模型对话框 -->
            <el-dialog v-model="updateBusinessModelWindowEnable" title="修改业务模型">
                <!-- 对话框内容 -->
                <el-form :model="businessModelUpdate" label-width="120px">
                    <el-form-item label="业务模型key">
                        <el-input disabled v-model="businessModelUpdate.modelKey"></el-input>
                    </el-form-item>
                    <el-form-item label="业务模型名称">
                        <el-input v-model="businessModelUpdate.modelName"></el-input>
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input v-model="businessModelUpdate.description" type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item label="是否启用">
                        <el-radio-group v-model="businessModelUpdate.isEnable">
                            <el-radio :value="0">启用</el-radio>
                            <el-radio :value="1">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="insertBusinessModelWindowEnable = false">取消</el-button>
                        <el-button type="primary" @click="updateBusinessModelSubmit()">确定</el-button>
                    </span>
                </template>
            </el-dialog>
            <!-- 业务模型明细项详情 -->
            <el-dialog v-model="businessModelItemWindowsEnable" title="业务模型明细项" width="75%">
                业务模型key：<el-text class="mx-1">{{ businessModelItemWindow.modelKey }}</el-text>
                业务模型name：<el-text class="mx-1">{{ businessModelItemWindow.modelName }}</el-text>
                <br>
                <span>明细项key：</span><el-input v-model="businessModelItemQueryParam.fieldKey" style="width: 240px" placeholder="Please input" />
                <span>明细项名称：</span><el-input v-model="businessModelItemQueryParam.fieldName" style="width: 240px" placeholder="Please input" />
                <br>
                <el-button type="primary" :icon="Search" @click="searchBusinessModelItemByQueryParam()">Search</el-button>
                <el-button type="success" :icon="Plus" @click="insertBusinessModelItem()">新增</el-button>
                <br>
                <div>
                    <el-table :data="paginatedModelItems" style="width: 100%">
                        <el-table-column label="id" width="50">
                            <template #default="scope">
                                <el-popover effect="light" trigger="hover" placement="top" width="auto">
                                        <template #default>
                                            <div>{{ scope.row.id }}</div>
                                        </template>
                                        <template #reference>
                                            <el-tag>{{ scope.row.id.toString().substring(0, 4) }}</el-tag>
                                        </template>
                                    </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column label="字段key" width="180">
                            <template #default="scope">
                                <span style="margin-left: 10px">{{ scope.row.fieldKey }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="字段名称" width="180">
                            <template #default="scope">
                                <span style="margin-left: 10px">{{ scope.row.fieldName }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="字段取值类型" width="180">
                            <template #default="scope">
                                <span style="margin-left: 10px">{{ getFieldValutType(scope.row.fieldValueType) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="字段类型" width="180">
                            <template #default="scope">
                                <span style="margin-left: 10px">{{ scope.row.fieldType }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column label="描述" width="150">
                            <template #default="scope">
                                <el-popover effect="light" trigger="hover" placement="top" width="auto">
                                <template #default>
                                    <div>{{ scope.row.description }}</div>
                                </template>
                                <template #reference>
                                    <el-tag>{{ scope.row.description.substring(0, 4) }}</el-tag>
                                </template>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button type="warning" size="small" :icon="Edit" @click="updateBusinessModelItem(scope.$index, scope.row)">修改</el-button>
                                <el-button type="danger" size="small" :icon="Delete" @click="deleteBusinessModelItem(scope.row.id)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 添加分页组件 -->
                    <div class="pagination-container">
                        <el-pagination 
                            v-model:current-page="modelItemCurrentPage" 
                            v-model:page-size="modelItemPageSize"
                            :page-sizes="[10, 20, 50, 100]"
                            size="small" 
                            layout="prev, pager, next" 
                            :total="businessModelItemInfoList.length"
                            @size-change="modelItemHandleSizeChange"
                            @current-change="modelItemHandleCurrentChange"
                        />
                    </div>
                </div>
            </el-dialog>
            <!-- 新增业务模型明细项目 -->
            <el-dialog v-model="insertBusinessModelItemWindowEnable" title="新增业务模型明细项">
                <!-- 对话框内容 -->
                <el-form :model="businessModelItemInsert" label-width="120px">
                    <el-form-item label="字段key">
                        <el-input v-model="businessModelItemInsert.fieldKey"></el-input>
                    </el-form-item>
                    <el-form-item label="字段名称">
                        <el-input v-model="businessModelItemInsert.fieldName"></el-input>
                    </el-form-item>
                    <el-form-item label="字段取值类型">
                        <el-select
                            v-model="businessModelItemInsert.fieldValueType"
                            placeholder="Select"
                            size="large"
                            style="width: 240px"
                            @change="handleFieldValueTypeChangeEvent"
                            >
                            <el-option
                                v-for="item in fieldValueTypeList"
                                :key="item.value"
                                :label="item.value"
                                :value="item.key"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="字段类型">
                        <el-autocomplete
                            v-model="businessModelItemInsert.fieldType"
                            :fetch-suggestions="autoCompleteQuerySearch"
                            popper-class="my-autocomplete"
                            placeholder="Please input"
                            @select="autoCompleteHandleSeletct"
                        >
                            <template #suffix>
                            <el-icon class="el-input__icon" @click="actoCompleteHandleIconClick">
                                <edit />
                            </el-icon>
                            </template>
                            <template #default="{ item }">
                            <div class="value">{{ item.key }}     {{ item.value }}</div>
                            </template>
                        </el-autocomplete>
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input v-model="businessModelItemInsert.description" type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item label="是否启用">
                        <el-radio-group v-model="businessModelItemInsert.isEnable">
                            <el-radio :value="0">启用</el-radio>
                            <el-radio :value="1">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="insertBusinessModelItemWindowEnable = false">取消</el-button>
                        <el-button type="primary" @click="insertBusinessModelItemSubmit()">确定</el-button>
                    </span>
                </template>
            </el-dialog>
            <!-- 修改业务模型明细项目 -->
            <el-dialog v-model="updateBusinessModelItemWindowEnable" title="修改业务模型明细项">
                <!-- 对话框内容 -->
                <el-form :model="businessModelItemUpdate" label-width="120px">
                    <el-form-item label="字段key">
                        <el-input disabled v-model="businessModelItemUpdate.fieldKey"></el-input>
                    </el-form-item>
                    <el-form-item label="字段名称">
                        <el-input v-model="businessModelItemUpdate.fieldName"></el-input>
                    </el-form-item>
                    <el-form-item label="字段取值类型">
                        <el-select
                            v-model="businessModelItemUpdate.fieldValueType"
                            placeholder="Select"
                            size="large"
                            style="width: 240px"
                            @change="handleFieldValueTypeChangeEvent"
                            >
                            <el-option
                                v-for="item in fieldValueTypeList"
                                :key="item.value"
                                :label="item.value"
                                :value="item.key"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="字段类型">
                        <el-autocomplete
                            v-model="businessModelItemInsert.fieldType"
                            :fetch-suggestions="autoCompleteQuerySearch"
                            popper-class="my-autocomplete"
                            placeholder="Please input"
                            @select="autoCompleteHandleSeletct"
                        >
                            <template #suffix>
                            <el-icon class="el-input__icon" @click="actoCompleteHandleIconClick">
                                <edit />
                            </el-icon>
                            </template>
                            <template #default="{ item }">
                            <div class="value">{{ item.key }}     {{ item.value }}</div>
                            </template>
                        </el-autocomplete>
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input v-model="businessModelItemUpdate.description" type="textarea"></el-input>
                    </el-form-item>
                    <el-form-item label="是否启用">
                        <el-radio-group v-model="businessModelItemUpdate.isEnable">
                            <el-radio :value="0">启用</el-radio>
                            <el-radio :value="1">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="updateBusinessModelItemWindowEnable = false">取消</el-button>
                        <el-button type="primary" @click="updateBusinessModelItemSubmit()">确定</el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { computed, onMounted, ref } from 'vue'
    import { Search, Edit, Delete, Plus, List } from '@element-plus/icons-vue'
    import useBusinessModel from '@/hooks/useBusinessModel'
    const {
        insertBusinessModelWindowEnable,
        updateBusinessModelWindowEnable,
        businessModelItemWindowsEnable,
        insertBusinessModelItemWindowEnable,
        updateBusinessModelItemWindowEnable,
        businessModelQueryParam,
        businessModelInsert,
        businessModelUpdate,
        businessModelInfoList,
        businessModelItemQueryParam,
        businessModelItemWindow,
        businessModelItemInsert,
        businessModelItemUpdate,
        businessModelItemInfoList,
        fieldValueTypeList,
        filedTypeList,
        businessModelCurrentPage,
        businessModelPageSize,
        modelItemCurrentPage,
        modelItemPageSize,
        searchBusinessModelByQueryParam,
        getBusinessModelItemInfo,
        updateBusinessModel,
        deleteBusinessModel,
        insertBusinessModelSubmit,
        updateBusinessModelSubmit,
        searchBusinessModelItemByQueryParam,
        insertBusinessModelItem,
        updateBusinessModelItem,
        deleteBusinessModelItem,
        insertBusinessModelItemSubmit,
        updateBusinessModelItemSubmit,
        getFieldValutType,
        loadFieldTypeList,
        handleFieldValueTypeChangeEvent,
        autoCompleteQuerySearch,
        autoCompleteHandleSeletct,
        actoCompleteHandleIconClick,
        businessModelHandleSizeChange,
        businessModelHandleCurrentChange,
        modelItemHandleCurrentChange,
        modelItemHandleSizeChange
    } = useBusinessModel()

    // 计算分页后的数据
    const paginatedBusinessModels = computed(() => {
        const start = (businessModelCurrentPage.value - 1) * businessModelPageSize.value
        const end = start + businessModelPageSize.value
        return businessModelInfoList.slice(start, end)
    })

    const paginatedModelItems = computed(() => {
        const start = (modelItemCurrentPage.value - 1) * modelItemPageSize.value
        const end = start + modelItemPageSize.value
        return businessModelItemInfoList.slice(start, end)

    })

    onMounted(() => {
        searchBusinessModelByQueryParam(businessModelQueryParam)
        // 获取fieldType列表
        loadFieldTypeList()
    })
</script>

<style scoped>
.business-container {
    margin: 0 auto;
    padding: 15px;
}

.business-container h2 {
    font-size: 22px;
    color: #303133;
    margin-bottom: 20px;
    border-left: 4px solid #409eff;
    padding-left: 10px;
}

.business-model-table,
.business-model-item-table {
    width: 100%;
    margin-bottom: 15px;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.table-section {
  background: #fff;
  padding: 10px 0;
}

.page-title {
    font-size: 28px;
    color: #333;
    margin-bottom: 24px;
    border-bottom: 2px solid #eee;
    padding-bottom: 12px;
}

.content-wrapper {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.query-section {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 10px; /* 添加内边距 */
    background: #f5f7fa; /* 背景色 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 阴影 */
}

.button-section {
    margin-left: 20px;
}

.input-field {
    width: 240px;
    margin-right: 10px;
}

.business-table {
    width: 100%;
    margin-top: 20px;
}

.pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
}
</style>